<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>士兵扫雷</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				overflow: hidden;
			}
			body{
				background: url("images/bg.jpg") no-repeat;
			}
			.box{
				transform:perspective(800px) rotatex(45deg);
				width: 500px;
				height:500px;
				margin: 20px auto;
				border-top: 1px solid #B25F27;
				border-left: 1px solid #B25F27;
				box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
			}
			.block{
				width: 49px;
				height: 49px;
				border-right:1px solid #B25F27;
				border-bottom:1px solid #B25F27;
				box-shadow: 0 0 4px #333 inset;  /*内阴影*/
				background: url(images/cao.jpg);
				float: left;
			}
			.show{
				background:url(images/dilei.jpg) no-repeat;
			}
			.num{
				background: #ECD0A1;
				font-size: 18px;
				/*color: #fff;*/
				font-weight: bold;/*加粗*/
				text-align: center;
				line-height: 49px;
			}
			.time{/*右边时钟*/
				width: 50px;
				height: 50px;
				background: url(images/shizhong.jpg) no-repeat;
				color: #fff;
				border: 1px solid red;
				text-align: center;
				line-height: 50px;
				font-size: 20px;
				font-weight: bold;
				font-family: "微软雅黑";
		
				position: absolute;
				right: 20px;
				top: 50px;
				
			}
			.flagbox{/*右边红旗总计*/
				width: 40px;
				height: 40px;
				padding: 5px;
				background: url(images/hongqi.jpg) no-repeat;
				border: 1px solid red;
		
				text-align:center;
				line-height: 50px;
				font-size: 20px;
				font-weight: bold;
				font-family: "微软雅黑";
		
				position: absolute;
				right: 20px;
				top: 120px;
				
			}
			.flag{
				background:url(images/hongqi.jpg) no-repeat;
			}
		</style>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript">
			$(document).ready(function(){
		$(function(){
		do{
			//用两个循环创建100个块，并且随机产生10个加一个雷的类名
			//给每个块添加位置数据 和 id属性 鼠标按下事件
			$(".box").empty();
			for(var i=0;i<10;i++){
				for(var j=0;j<10;j++){
					var islei = Math.random()>0.9;
					$("<div></div>").addClass(function(){
						return "block"+(islei? " lei":"");
					}).data("pos",{x:i,y:j}).attr("id",i+"-"+j).mousedown(mousedownhandler).appendTo(".box");
				}
			}
		}while($(".lei").length != 10);//设置雷数
			$(document).on("contextmenu",false);  //右击浏览器弹出窗口事件 被 contextmenu事件冲掉
			function mousedownhandler(e){
				e.preventDefault();
				if(e.which == 1){                   //鼠标左击事件
					leftclick.call(this);		  //将this指针保存到leftclick上
				}else if(e.which == 3){			 //鼠标右击事件
					rightclick.call(this);        // 将this指针保存到rightclick上
				}
			}
			//处理鼠标左键事件
			/*点击左键的情况  
			1.有旗子  不能踩 不能点击
			2.踩到雷 游戏结束 显示所有雷

			*/
			function leftclick(){ //左键踩雷
				if($(this).hasClass("flag")){       //右击后不能左击 有旗子不能再踩雷
					return;
				}
				if($(this).hasClass("lei")){
					alert("Game Over!");             //左击点到雷  游戏结束
					// $(".block").filter(":not(lei)").addClass("num");
					$(".lei").addClass("show");      //所有的雷显示
				}else{
					var n=0;						 //如果点到的不是雷，显示出他旁边雷的个数
					var pos=$(this).data("pos");
					// console.log(pos.x);
					$(this).addClass("num");
					for(var i=pos.x-1;i<=pos.x+1;i++){
						for(var j=pos.y-1;j<=pos.y+1;j++){
							/*遍历九个宫格的lei数
										1.1  1.2  1.3

										2.1  2.2  2.3
										
										3.1  3.2  3.3
							*/
							if($("#"+i+"-"+j).hasClass("lei")){
								n++;
							}
						}
					}
					$(this).text(n);//显示雷数
					if(n==0){
							for(var i=pos.x-1;i<=pos.x+1;i++){
								for(var j=pos.y-1;j<=pos.y+1;j++){
									/*遍历九个宫格的雷数
										1.1  1.2  1.3

										2.1  2.2  2.3

										3.1  3.2  3.3
									*/
									if($("#"+i+"-"+j).length != 0){
										if(!$("#"+i+"-"+j).data("check")){
											$("#"+i+"-"+j).data("check",true);
											leftclick.call($("#"+i+"-"+j)[0]);//把所有num=0附近九个宫格的都给打开，并显示数字
									}
								}
							}
						}
					}
				}
			}
			//右键插旗子
			/*判断状态 
			1.数字num  不能插旗flag
			2.有旗子flag 不做操作
			3.如果没有旗子flag 添加一个旗子flag


			*/

			function rightclick(){
				if($(this).hasClass("num")){     //有数字的不能够再次右击
					return;
				}
				if($(this).hasClass("flag")){ //如果有旗子flag，则收回一个flagbox+1
					$(".flagbox").text(function(index,num){    
						num = parseInt(num);
						return ++num;
					})
				}else{//如果没有旗子flag
					if($(".flag").length == 10){//如果场上旗子flag已经存在10个，不做操作
						return;
					}
					$(".flagbox").text(function(index,num){
						num = parseInt(num);
						return --num;
					})
				}
				$(this).toggleClass("flag");     //右击切换flag类名 
				if($(".flag").filter(".lei").length == 10){ //统计插旗和雷数是否都相同
						alert("Success!");//游戏结束 胜利
					}

			}
			var t=setInterval(function(){        //计时器
				$(".time").text(function(index,n){
					return --n;
				})
				if($(".time").text() == 0){
					clearInterval(t);
					alert("时间到，游戏结束！");
					$(".box").empty();
				}
			},1000)//时间为100s
		})
	})
		</script>
	</head>
	<body>
		<div class="box">
			<!--<div class="block"></div>-->
		</div>
		<div class="flagbox">10</div>
		<div class="time">10</div>
	</body>
</html>

